/*
 * @Author: hongbin
 * @Date: 2022-11-03 20:14:50
 * @LastEditors: hongbin
 * @LastEditTime: 2022-11-20 20:20:09
 * @Description:身份验证组件 登陆 注册
 */
import { FC } from "react";
import styled, { css } from "styled-components";
import { SetState } from "../../meta/types";
import { flexCenter } from "../../styled";
import Login from "./Login";
import Register from "./Register";

interface IProps {
    show: boolean;
    option: "LOGIN" | "REGISTER";
    setOption: SetState<IProps["option"]>;
}

const Authentication: FC<IProps> = ({ show, option, setOption }) => {
    return (
        <Container option={option} show={show}>
            {option === "LOGIN" ? (
                <Login toggleRegister={() => setOption("REGISTER")} />
            ) : (
                <Register toggleLogin={() => setOption("LOGIN")} />
            )}
        </Container>
    );
};

export default Authentication;

const Container = styled.div<{ show: boolean; option: "LOGIN" | "REGISTER" }>`
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 1vw;
    background-color: #045e04;
    border: 2px solid #004100;
    transition: all 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    ${flexCenter};
    cursor: default;

    & > * {
        visibility: visible;
        transition: all 0.1s;
    }

    ${({ show, option }) =>
        show
            ? css`
                  top: -0.5vmax;
                  width: 1vw;
                  right: -0.5vmax;
                  ${option == "LOGIN"
                      ? `
                        width: 20vw;
                        // height: 40vh;
                        // min-height: 200px;
                     `
                      : `
                        width: 35vw;
                        max-height: 100vh;
                      `}
              `
            : css`
                  width: 1vw;
                  height: 1vw;
                  & > * {
                      transition: all 0s;
                      visibility: hidden;
                  }
              `}
`;
